<template>
    <!-- 我们不知道什么时候能拿到max值 -->
    <!-- 所以采用watch属性监听父亲传过来的max，无论watch被触发几次，
    最后是一个合法的max -->
    <div class="mui-numbox" data-numbox-min='1'>
        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
        <input id="test" class="mui-input-numbox" type="number" value="1" 
        @change="countChanged" ref="numbox" />
        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
</template>

<script>
    import mui from "../../lib/mui/js/mui.min.js";
    export default {
        data() {
            return {
                
            }
        },
        // 这个和图片分享的滑动导航一样要放在mounted这里，也要导入相关js
        // .mui-numbox 是选择器
        mounted() {
            mui(".mui-numbox").numbox()
            console.log(this.max) 
        },
        methods: {
            // 每当文本框数据改变时，立即把最新的数据通过事件调用传给父
            countChanged() {
                this.$emit('getcount',parseInt(this.$refs.numbox.value));
            }
        },
        props: ["max"],
        watch: {
             //属性监听
             // 使用 JS API 设置 numbox 的最大值
             //因为不知道什么时候max会读到真正最大的，所以其一改变就讲newVal最新值赋给 .mui-numbox 的 "max"
             'max': function(newVal,oldVal){
                mui(".mui-numbox")
               .numbox()
               .setOption("max", newVal);
             }
        }
    }

</script>

<style>

</style>